<template lang="html">
  <div class="container" v-loading="loading">
      <div class="search">
            <el-button type="primary" size="small" @click="onHandleAdd">新增</el-button>
            <el-button type="danger" size="small" @click="onDelete">批量删除</el-button>
      </div>

      <div class="tables">
        <el-table :data="tableData" @selection-change="handleSelectionChange" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
              <el-table-column type="selection" width="40"></el-table-column>
              <el-table-column prop="levelName" label="等级名称" align="center"></el-table-column>
              <el-table-column prop="growUpValue" label="成长值满足" align="center"></el-table-column>
              <el-table-column prop="integralScale" label="积分获得比例" align="center"></el-table-column>
              <el-table-column prop="isIntegral" label="积分使用权限" align="center">
                <template slot-scope="scope">
                  <p v-if="scope.row.isIntegral == 1">可使用</p>
                  <p v-if="scope.row.isIntegral == 2">不可使用</p>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" align="center"></el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                    <el-switch @change="onSwitch(scope.row)" v-model="scope.row.opState" :active-value="1" :inactive-value="2" active-color="#4196FF" inactive-color="#D7D7D7"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="300">
                  <template slot-scope="scope">
                      <el-button type="primary" size="mini" @click="fEditor(scope.row)">编辑</el-button>
                      <el-button type="danger" size="mini" @click="fDelete(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
        </el-table>
      </div>

      <el-dialog :title="dialogTitle" v-loading="loading" append-to-body :visible.sync="dialogVisible" width="30%" >
          <div class="form">
              <div class="form_item">
                  <span> <i>*</i> 等级名称</span>
                  <el-input v-model="newForm.levelName"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 成长值满足</span>
                  <el-input v-model="newForm.growUpValue"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 积分获得比例</span>
                  <el-input v-model="newForm.integralScale"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 积分使用权限</span>
                  <div class="radio_box">
                    <el-radio v-model="newForm.isIntegral" :label="1">可使用</el-radio>
                    <el-radio v-model="newForm.isIntegral" :label="2">不可使用</el-radio>
                  </div>
              </div>
              <div class="form_item">
                  <span>备注</span>
                  <el-input type="textarea" v-model="newForm.remark"></el-input>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="handleConfirm">确 定</el-button>
          </span>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      dialogTitle: '',
      tableData: [],
      newForm: {},
      currentData: [],
      dialogVisible: false,
      switchVal: 1
    }
  },
  created(){
    this.selectMemberLevelList();
  },
  methods:{
    selectMemberLevelList(){
      this.loading = true;
      this.$http.selectMemberLevelList().then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.tableData = res.data.data;
        }
      });
    },
    handleSelectionChange(e){
      this.currentData = [];
      this.currentData = this.currentData.concat(e);
    },
    onHandleAdd(){
      this.dialogVisible = true;
      this.dialogTitle = '新增会员等级';
      this.newForm = {};
    },
    insertMemberLevel(data){
      this.$http.insertMemberLevel(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.dialogVisible = false;
          this.$message.success(res.data.message);
          this.selectMemberLevelList();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    updateMemberLevel(data){
      this.$http.updateMemberLevel(data).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.dialogVisible = false;
          this.$message.success(res.data.message);
          this.selectMemberLevelList();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handleConfirm(){
      if(!this.newForm.levelName){
        this.$message.error('请填写等级名称');
        return false;
      }else if(!this.newForm.growUpValue){
        this.$message.error('请填写成长值满足');
        return false;
      }else if(!this.newForm.integralScale){
        this.$message.error('请填写积分获得比例');
        return false;
      }else if(!this.newForm.isIntegral){
        this.$message.error('请填写积分使用权限');
        return false;
      }

      this.loading = true;
      if(this.dialogTitle == '新增会员等级'){
        let data = {
          levelName: this.newForm.levelName,
          growUpValue: this.newForm.growUpValue,
          integralScale: this.newForm.integralScale,
          isIntegral: this.newForm.isIntegral,
          remark: this.newForm.remark,
        }
        this.insertMemberLevel(data);
      }else{
        let data = {
          id: this.newForm.id,
          levelName: this.newForm.levelName,
          growUpValue: this.newForm.growUpValue,
          integralScale: this.newForm.integralScale,
          isIntegral: this.newForm.isIntegral,
          remark: this.newForm.remark,
        }
        this.updateMemberLevel(data);
      }
    },
    fEditor(e){
      this.newForm = e;
      this.dialogVisible = true;
      this.dialogTitle = '编辑会员等级';
    },
    onDelete(){
      let aId = [];
      this.currentData.forEach(item=>{aId.push(item.id)});
      this.$confirm('您确定要删除这些等级吗？').then(res=>{
        return this.$http.deleteMemberLevels({ids:aId.join(',')})
      }).then(res=>{
        if(res.data.code == 0){
          this.$message.success('删除成功');
        }else{
          this.$message.error(res.data.message);
        }
        this.selectMemberLevelList();
      }).catch(e=>0);
    },
    fDelete(e){
      this.$confirm('您确定要删除此会员等级吗？').then(res=>{
         this.$http.deleteMemberLevel({id:e.id}).then(res=>{
             if(res.data.code == 0){
               this.$message.success('删除成功');
             }else{
               this.$message.error(res.data.message);
             }
             this.selectMemberLevelList();
         })
      }).catch(e=>0);
    },
    onSwitch(e){
      this.$http.closeMemberLevel({id: e.id,opState:e.opState}).then(res=>{
        if(res.data.code===0){
            this.$message.success(res.data.message);
        }else{
            this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.search{
  margin-bottom: 10px;
}
.form i{
  font-style: normal;
  color: #FB3F3F;
}
.form  .form_item{
  display: flex;
  line-height: 40px;
}
.form .radio_box{
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
}
.form  .form_item span{
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 20px;
}
</style>
